<template>
    <div>
        <center><h3>药品入库</h3></center>
        <el-form ref="addmedecineForm" :model="medecineInfo" :rules="rules" label-width="100px" class="login-box">
            <br>
            <el-form-item label="名称"  class="out"  prop="name">
                <el-input type="text" v-model="medecineInfo.name" class="inputs"  placeholder="请输入名称"/>
            </el-form-item>
            <el-form-item label="价格(元)"  class="out"  prop="price">
                <el-input type="text"  v-model="medecineInfo.price" class="inputs" placeholder="请输入价格"/>
            </el-form-item>
            <el-form-item label="售价(元)" class="out"  prop="sell">
                <el-input type="text"  v-model="medecineInfo.sell" class="inputs" placeholder="请输入售价"/>
            </el-form-item>
            <el-form-item label="类别"  class="out" prop="sort">
                <el-radio  v-model="medecineInfo.sort" style="margin-left: 50px" label="中药">中药</el-radio>
                <el-radio v-model="medecineInfo.sort" style="margin-right: 106px" label="西药">西药</el-radio>
            </el-form-item>
            <el-form-item label="生产厂家" class="out"  prop="vender">
                <el-input type="text"  v-model="medecineInfo.vender" class="inputs" placeholder="请输入厂家名称"/>
            </el-form-item>
            <el-form-item label="批次" class="out"  prop="batch">
                <el-input type="text"  v-model="medecineInfo.batch" class="inputs" placeholder="请输入批次"/>
            </el-form-item>
            <el-form-item label="规格(粒)" class="out"  prop="specification">
                <el-input type="text"  v-model="medecineInfo.specification" class="inputs" placeholder="请输入规格"/>
            </el-form-item>
            <el-form-item label="用量(粒/次)" class="out"  prop="dosage">
                <el-input type="text"  v-model="medecineInfo.dosage" class="inputs" placeholder="请输入用量"/>
            </el-form-item>
            <el-form-item label="用法(次/天)" class="out"  prop="useWay">
                <el-input type="text"  v-model="medecineInfo.useWay" class="inputs" placeholder="请输入用法"/>
            </el-form-item>

            <el-form-item label="保质期(月)"  class="out"  prop="endDate">
                <el-input-number style="margin-left: 20px;margin-right: 90px" v-model="medecineInfo.endDate" @change="handleChange" :min="1" :max="36" label="描述文字">

                </el-input-number>
            </el-form-item>
            <el-form-item label="生产日期"  class="out"  prop="beginDate">
                <el-date-picker
                        v-model="medecineInfo.beginDate"
                        type="date"
                        placeholder="选择日期"
                        @change="getTime">
                </el-date-picker>
            </el-form-item>

            <center>
                <el-form-item style="margin-top:400px">
                    <el-button type="primary" v-on:click="onSubmit('addmedecineForm')" >入库</el-button>
                </el-form-item>
            </center>
        </el-form>
        <el-dialog
                title="温馨提示"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <span>请正确填写信息</span>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>

        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'
    import {ElMessage} from "element-plus";
    export default {
        name: "DrugInput",
        data(){
            var valiNumberPass1 = (rule, value, callback) => {//包含小数的数字
                let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
                if (value === '') {
                    callback(new Error('请输入内容'));
                }else if (value*1<=0) {
                    callback(new Error('数字要大于0'));
                }else if (!reg.test(value)) {
                    callback(new Error('请输入数字'));
                }  else {
                    callback();
                }
            };
            return{
                medecineInfo: {
                    id: '',
                    deleted:0,
                    name: '',
                    price:'',
                    sell:'',
                    sort:'',
                    endDate:6,
                    specification:'',
                    vender:'',
                    batch:'',
                    dosage:'',
                    useWay:'',
                    beginDate:'',
                },
                dialogVisible:false,
                rules:{
                    name:[
                        {required:true,message:"名称不可为空",trigger:'blur'}
                    ],
                    id:[
                        {required:true,message:"编号不可为空",trigger:'blur'}
                    ],
                    price:[
                        {required:true,message:"价格不可为空",trigger:'blur'},
                        { validator: valiNumberPass1, trigger: 'blur' }
                    ],
                    sell:[
                        {required:true,message:"售价不可为空",trigger:'blur'},
                        { validator: valiNumberPass1, trigger: 'blur' }
                    ],
                    sort:[
                        {required:true,message:"类别不可为空",trigger:'blur'}
                    ],
                    endDate:[
                        {required:true,message:"保质期不可为0",trigger:'blur'}
                    ],
                    specification:[
                        {required:true,message:"规格不可为空",trigger:'blur'},
                        { validator: valiNumberPass1, trigger: 'blur' }
                    ],
                    vender:[
                        {required:true,message:"厂家不可为空",trigger:'blur'}
                    ],
                    batch:[
                        {required:true,message:"批次不可为空",trigger:'blur'},
                        { validator: valiNumberPass1, trigger: 'blur' }
                    ],
                    dosage:[
                        {required:true,message:"用量不可为空",trigger:'blur'},
                        { validator: valiNumberPass1, trigger: 'blur' }
                    ],
                    useWay:[
                        {required:true,message:"用法不可为空",trigger:'blur'},
                        { validator: valiNumberPass1, trigger: 'blur' }
                    ],
                    beginDate:[
                        {required:true,message:"生产日期不可为空",trigger:'blur'}
                    ],

                },
            }
        },
        methods:{
            getTime(val) {
                const d = new Date(val);
                this.medecineInfo.beginDate= d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            },
            onSubmit( formName ) {
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/medecine-info/addMedecine",this.medecineInfo).then(resp=> {
                            if(resp.data.success)
                            {
                                ElMessage.success("入库成功!");
                                location.reload();
                            }
                        });

                    }else {
                        this.dialogVisible = true ;
                        return false;
                    }
                })
            }
        }

    }
</script>

<style scoped>
    .login-box{

        padding: 10px 35px 15px 35px;

    }
    .out{
        float: left;
        margin-left: 50px;
    }
    .inputs{
        width: 290px;
    }
</style>